<template>
  <view>
    <van-tabbar route v-model="active" @change="onChange">
      <van-tabbar-item replace :to="item.pagePath" :name="index" v-for="(item, index) in tabbarList" :key="index">
        <template #icon="props">
          <img :active="props.active" :size="28" :src="props.active ? item.selectedIconPath : item.iconPath" />
        </template>
        <text>{{ item.text }}</text>
      </van-tabbar-item>
    </van-tabbar>
  </view>
</template>

<script setup lang="ts">
  const active = ref(0);

  interface tabbarItem {
    pagePath: string;
    text: string;
    iconPath: string;
    selectedIconPath: string;
  }

  const tabbarList: Array<tabbarItem> = [
    {
      pagePath: '/home',
      text: '首页',
      iconPath: new URL('./img/home.png', import.meta.url).href,
      selectedIconPath: new URL('./img/home_active.png', import.meta.url).href,
    },
    {
      pagePath: '/msg',
      text: '消息',
      iconPath: new URL('./img/msg.png', import.meta.url).href,
      selectedIconPath: new URL('./img/msg_active.png', import.meta.url).href,
    },
    {
      pagePath: '/link',
      text: '通讯录',
      iconPath: new URL('./img/link.png', import.meta.url).href,
      selectedIconPath: new URL('./img/link_active.png', import.meta.url).href,
    },
    {
      pagePath: '/life',
      text: '生活圈',
      iconPath: new URL('./img/life.png', import.meta.url).href,
      selectedIconPath: new URL('./img/life_active.png', import.meta.url).href,
    },
    {
      pagePath: '/my',
      text: '我的',
      iconPath: new URL('./img/my.png', import.meta.url).href,
      selectedIconPath: new URL('./img/my_active.png', import.meta.url).href,
    },
  ];
  const onChange = () => {
    console.log(active);
  };
</script>

<style lang="less" scoped>
  @import '/@/common/style/mixin';

  .nav-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 5px 0;
    z-index: 1000;
    background: #fff;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    .nav-list {
      width: 100%;
      .fj();
      flex-direction: row;
      padding: 0;

      .nav-list-item {
        /*
      .add-action::after {
        content: "";
        position: absolute;
        width: 55px;
        height: 55px;
        top: -27px;
        left: 0;
        right: 0;
        margin: auto;
        box-shadow: 0 -1px 4px rgb(0 0 0 / 8%);
        border-radius: 27px;
        background-color: inherit;
        z-index: 0;
      }
      .add-action::before {
        position: absolute;
        width: 55px;
        height: 16px;
        bottom: 16px;
        left: 0;
        right: 0;
        margin: auto;
        background-color: inherit;
        z-index: 1;
      }*/
        display: flex;
        flex: 1;
        flex-direction: column;
        text-align: center;
        color: #666;

        .add-action {
          position: absolute;
          width: 38px;
          z-index: 2;
          height: 38px;
          border-radius: 50%;
          line-height: 38px;
          font-size: 27px;
          top: -19px;
          left: 0;
          right: 0;
          margin: auto;
          padding: 0;
        }

        &.router-link-active {
          color: @primary;
        }

        i {
          text-align: center;
          font-size: 22px;
        }

        span {
          font-size: 12px;
        }

        .van-icon-shopping-cart-o {
          margin: 0 auto;
          margin-bottom: 2px;
        }
      }

      .nav-list-item-end {
        height: 100%;
        padding-bottom: 3px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
      }
    }
  }
</style>
